import React, { Component } from 'react'
import avatar from '../../images/avatar.png'

export default class Form extends Component {
  state = {
    comment: ''
  }
  // 回车调用handClick发布文章
  onKeyDownchange (e) {
    if (e.keyCode == 13) {
      e.preventDefault()
      this.handClick()

    }
  }
  handleChange = (e) => {
    this.setState({
      comment: e.target.value
    })
  }
  handClick = () => {
    if (this.state.comment.trim().length === 0) {
      return alert('不能为空')
    }
    const newComment = {
      id: Date.now(),
      author: '张三',
      comment: this.state.comment,
      time: new Date(),
      img: avatar,
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
    }
    // 子组件调用父组件提供的添加方法
    this.props.handleAdd(newComment)
    this.setState({ comment: '' })
  }
  render () {
    return (
      <div className='comment-send'>
        <div className='user-face'>
          <img className='user-head' src={avatar} alt='' />
        </div>
        <div className='textarea-container'>
          <textarea
            cols='80'
            rows='5'
            placeholder='发条友善的评论'
            className='ipt-txt'
            value={this.state.comment}
            onChange={this.handleChange}
            onKeyDown={e => this.onKeyDownchange(e)}
          ></textarea>
          <button className='comment-submit'
            onClick={this.handClick}
          >发表评论</button>
        </div>
        <div className='comment-emoji'>
          <i className='face'></i>
          <span className='text'>表情</span>
        </div>
      </div>
    )
  }
}